<template>
  <div id="main">
    <BaseReturnHomePage/>
    <div id="form">
      <div id="title">
        资源提交
      </div>
      <el-tag style="margin: 5px 137px;font-size: 17px">本页面您可以提交资源到果核网站，果核会快速收录资源。商业软件请找果核网站底部合作</el-tag>
      <el-form :rules="rules" label-position="top" ref="form" :model="form" label-width="80px">
        <el-form-item label="软件标题" prop="softTitle">
          <el-input v-model="form.softTitle"></el-input>
        </el-form-item>
        <el-form-item label="平台类型" prop="softPlatform">
          <el-select v-model="form.softPlatform" placeholder="请选择平台类型">
            <el-option label="windows" value="windows"/>
            <el-option label="linux" value="linux"/>
            <el-option label="安卓" value="安卓"/>
            <el-option label="苹果" value="苹果"/>
            <el-option label="其他" value="其他"/>
          </el-select>
        </el-form-item>

        <el-form-item label="上架类型" prop="submitType">
          <el-select v-model="form.submitType" placeholder="请选择上架类型">
            <el-option label="更新(网站已有当前程序)" value="update"/>
            <el-option label="上新(网站没有,提交收录)" value="insert"/>
          </el-select>
        </el-form-item>

        <el-form-item label="软件版本" prop="softVersion">
          <el-input placeholder="请输入软件版本" v-model="form.softVersion"/>
        </el-form-item>
        <el-form-item label="介绍与描述" prop="softDesc">
          <el-input v-model="form.softDesc" type="textarea" placeholder="修改了什么,更新了什么,新软件提交理由,都可以写在这"/>
        </el-form-item>
        <el-form-item label="下载地址" prop="softDownloadLink">
          <el-input v-model="form.softDownloadLink" placeholder="填写找到的资源地址,或者给我网盘"/>
        </el-form-item>
        <el-form-item label="分享作者" prop="userInfo">
          <el-input v-model="form.userInfo" placeholder="网站会备注是你分享的资源"/>
        </el-form-item>
        <el-form-item label="联系邮箱" prop="userMail">
          <el-input v-model="form.userMail" placeholder="收录成功,我们会发邮件给你;或者其他交流信息也会发邮件给你"/>
        </el-form-item>
        <el-form-item label="支付宝账号" prop="payment">
          <el-input v-model="form.payment" placeholder="资源有价值,我们会有红包奖励"/>
        </el-form-item>
        <el-form-item>
          <el-button
            style="background-color:rgb(123,103,238);margin-top:53px;margin-left: 258px;height:57px;width:350px;font-size: 19px"
            type="primary"
            @click="onSubmit">匿名提交
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style scoped>

/deep/ .el-form-item__label {
  font-weight: bold;
  font-size: 21px;
}

#title {
  position: absolute;
  line-height: 48px;
  font-size: 32px;

  top: 13px;
  left: 42%;
  word-spacing: 5px;
}

#main::before {
  content: 'nihao';
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent url(../assets/bgi/submitRes.jpg) center center no-repeat;
  filter: blur(10px);
  /*background-color: red;*/
}

#main {
  position: relative;
  height: 150%;
  background-size: cover;
}


#form {
  position: absolute;
  top: 36px;
  left: 495px;
  width: 50%;

  padding: 90px 48px;
  background-color: white;
  font-size: 20px;
  box-shadow: 0px 16px 20px 12px #b9b6b6;;
  border-right: 1px solid #7f848b;
  border-bottom: 1px solid #7f848b;
  border-radius: 31px;
}
</style>

<script>
import BaseReturnHomePage from "@//components/base/BaseReturnHomePage";
import {saveUploadLog} from "@//assets/http/request";

export default {
  components: {BaseReturnHomePage},
  data() {
    let checkUserMail = (rule, value, callback) => {
      let regExp = new RegExp('^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$');
      if (regExp.test(value)) {
        console.log("正砸验证发")
        callback();
      } else {
        callback(new Error("请填写正确的邮箱格式"));
      }
    };
    return {
      rules: {
        softTitle: [
          {required: true, message: '请输入软件名称', trigger: 'blur'},
          {min: 3, max: 250, message: '长度在 3 到 250 个字符', trigger: 'blur'}
        ],
        softPlatform: [{
          required: true, message: '平台类型对我们至关重要', trigger: 'blur'
        }],
        submitType: [{
          required: true, message: '提交类型同样对我们至关重要', trigger: 'blur'
        }],
        softDownloadLink: [{
          required: true, message: '开放的链接是通往共享的必经之路', trigger: 'blur'
        }],
        userMail: [{
          validator: checkUserMail, trigger: 'blur'
        }]
      },
      form: {
        uploadUserId: '',
        softTitle: '',
        softPlatform: '',
        submitType: '',
        softVersion: '',
        softDesc: '',
        softDownloadLink: '',
        userInfo: '',
        userMail: '',
        payment: ''
      }
    }
  },
  methods: {
    onSubmit() {
      //todo 功能点: 提交多次失败,联系维修人员
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.uploadUserId = JSON.parse(localStorage.getItem('USER')).id;
          saveUploadLog(this.form);
          this.form = {};
        } else {
          this.$message({
            type: "warning",
            message: "请正确填写表单再提交"
          })
        }
      })

    }
  }
}
</script>
